@charset "utf-8";
@import "reset";
$zcm:40;
@function r($px) {
    @return $px/(2*$zcm) * 1rem;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
}

header {
    width: 100%;
    height: r(75);
    position: absolute;
    top: 0;
    a {
        height: 100%;
        left: r(28);
        position: absolute;
        color: #000000;
        img{
            width: r(22);
            height: r(38);
            vertical-align: top;
            position: relative;
            top: r(16);
        }
    }
    p {
        font-size: r(28);
        text-align: center;
        line-height: r(75);
    }
}
section{
    width: 100%;
    background: white;
    position: absolute;
    top: r(75);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    nav{
        width: 100%;
        height: r(60);
        background: #f2f2f2;
        ul{
            width: r(462);
            margin: 0 auto;
            li:nth-child(1){
                margin-left: r(-20);
            }
            li:nth-child(2){
                margin-left: r(140);
            }
            li:nth-child(3){
                margin-left: r(102);
            }
            li{
                float: left;
                font-size: r(20);
                
                line-height: r(60);
                select{
                    border: none;
                    background: #F2F2F2;
                    appearance: none;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                }
                img{
                    width: r(15);
                    height: r(7);
                    vertical-align: middle;
                }
            }
        }
    }
    article{
        ul{
            
            li{
                margin-bottom: r(3);
                float: left;
                font-size: r(20);
                text-align: center;
                margin-right: r(2);
                position: relative;
                .people_img{
                    width: r(211);
                    height: r(212);
                    
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .img_info{
                    width: r(211);
                    height: r(58);
                    position: absolute;
                    bottom: r(0);
                    background: #c1d1f2;
                    opacity: .8;
                }
            }
        }
        
    }
}
